Skip to content

Birmingham | 2026-MAR-SDC | Joy Opachavalit | Sprint 2 | Chat App frontend and backend#80

Open
enjoy15 wants to merge 11 commits into
CodeYourFuture:mainfrom
enjoy15:chat-app
Open

Birmingham | 2026-MAR-SDC | Joy Opachavalit | Sprint 2 | Chat App frontend and backend#80
enjoy15 wants to merge 11 commits into
CodeYourFuture:mainfrom
enjoy15:chat-app

Conversation

@enjoy15
Copy link
Copy Markdown

@enjoy15 enjoy15 commented May 17, 2026 •
edited
Loading

Learners, PR Template

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Backend
https://enjoy15-chat-app.hosting.codeyourfuture.io

Frontend
https://enjoy15-chat-app-frontend.hosting.codeyourfuture.io

Additional features:

  • Localized timestamps for message time display
  • Sticky composer with scrollable message list (newest messages shown first)

enjoy15 added 8 commits May 16, 2026 15:36
@enjoy15
initialize chat app server with message API
7287196
@enjoy15
add package.json for backend server configuration
628907d
@enjoy15
remove unnecessary fields from package.json
225a81c
@enjoy15
feat: add basic chat application frontend with message sending and lo…
3de57a5 
…ading functionality

- Implemented message sending and loading in app.js
- Created index.html for the chat interface
- Added styles in style.css for a better user experience
- Included package.json for project metadata
@enjoy15
feat: add scripts and dependencies for server functionality in packag…
00c32c8 
…e.json
@enjoy15
feat: add CORS support in server
08efdaa
@enjoy15
feat: implement frontend server with static file serving and API conf…
ce1d64e 
…iguration
@enjoy15
feat: add deployment guide for chat app with frontend and backend ins…
1461fe7 
…tructions
@github-actions

This comment has been minimized.

Sign in to view
@enjoy15 enjoy15 added Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. 📅 Sprint 2 Assigned during Sprint 2 of this module Module-Decomposition The name of the module. labels May 17, 2026
@github-actions

This comment has been minimized.

Sign in to view
@github-actions github-actions Bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 17, 2026
@github-actions

This comment has been minimized.

Sign in to view
1 similar comment
@github-actions

This comment has been minimized.

Sign in to view
@enjoy15 enjoy15 changed the title Chat app Birmingham | 2026-MAR-SDC | Joy Opachavalit | Sprint 2 | Chat App frontend and backend May 17, 2026
@enjoy15 enjoy15 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 17, 2026
cjyuan
cjyuan reviewed May 24, 2026
View reviewed changes
Copy link
Copy Markdown

@cjyuan cjyuan left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code is well modularized and organized, and the deployment instructions are clear and easy to follow. Excellent work!

Can you include this item in the PR description?

  • A description of the additional features you have implemented.

Comment thread chat-app/frontend/app.js
Comment thread chat-app/frontend/server.js
Copy link
Copy Markdown

@cjyuan cjyuan May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why implement a custom server instead of using an existing server implementation? For example, http-server?

Copy link
Copy Markdown
Author

@enjoy15 enjoy15 May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. I used a custom server to serve the frontend and runtime config, but I can switch to a simpler existing server if that’s preferred.

Copy link
Copy Markdown

@cjyuan cjyuan May 24, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to change. Just that using an existing server and preparing config.js as a file is probably easier.

Note: Currently the front-end server is setup to also serve server.js.

Comment thread chat-app/backend/server.js Outdated
Comment thread chat-app/frontend/index.html
Comment on lines +43 to +49
<section class="panel">
<div class="messages-header">
<h2>Messages</h2>
<button id="refresh-button" type="button" class="secondary">Refresh</button>
</div>
<ul id="messages" class="messages"></ul>
</section>
Copy link
Copy Markdown

@cjyuan cjyuan May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently, when the number of messages becomes large, users must repeatedly scroll to the top of the page to access the input field and enter new messages.

Could you address this issue or suggest a solution to improve the user experience?

Copy link
Copy Markdown
Author

@enjoy15 enjoy15 May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the suggestion. I updated the UI so the composer stays visible at the top and the message list is scrollable. I also render newest messages first so users see the latest activity immediately.

Copy link
Copy Markdown

@cjyuan cjyuan May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the current CSS, the "Send messages" panel could cover the "Message" panel.
image

Should be an easy fix, but no change needed.

@cjyuan cjyuan added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels May 24, 2026
@enjoy15
Copy link
Copy Markdown
Author

enjoy15 commented May 24, 2026

Thanks for your suggestion. PR updated.

@enjoy15 enjoy15 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 24, 2026
@cjyuan
Copy link
Copy Markdown

cjyuan commented May 24, 2026

All good, well done.

@cjyuan cjyuan added Complete Volunteer to add when work is complete and all review comments have been addressed. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Reviewed Volunteer to add when completing a review with trainee action still to take. labels May 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cjyuan cjyuan cjyuan left review comments

At least 2 approving reviews are required to merge this pull request.

Assignees

No one assigned

Labels

Complete Volunteer to add when work is complete and all review comments have been addressed. Module-Decomposition The name of the module. 📅 Sprint 2 Assigned during Sprint 2 of this module

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@enjoy15 @cjyuan